<template>
	<view class="install-container" style="margin-bottom: 30rpx;">
	
		<!-- 用户信息 -->
		<!-- 如果需要使用 validateFunction 自定义校验规则,则不能采用 uni-forms 的 rules 属性来配置校验规则，
		这时候需要通过ref，在onReady生命周期调用组件的setRules方法绑定验证规则 -->
		<uni-forms :value="params" ref="form" validateTrigger="bind" class="word5">
			
			<uni-forms-item required label="设施类型" name="设施类型">
				<view :class="label == '请选择设施类型' ? 'color':''" class="tap" @click="handleTap('picker')">{{label}}</view>
				<lb-picker ref="picker" @click="handleTap('picker')" @input="binddata('设施类型',$event)" v-model="params['设施类型']" mode="selector" :list="installTypeList" :dataset="{ name: 'label' }"
				 @confirm="handleConfirm" @cancel="handleCancel">
				</lb-picker>
				<!-- <input maxlength="50" placeholder="请输入设施类型" v-model='resident.name' @input="binddata('name',$event.detail.value)"> -->
			</uni-forms-item>
			<uni-forms-item required label="设施名称" name="设施名称">
				<input maxlength="50" placeholder="请输入设施名称" v-model="params['设施名称']" @input="binddata('设施名称',$event.detail.value)">
			</uni-forms-item>
			<!-- <uni-forms-item required label="设施编号：" name="设施编号">
				<input maxlength="50" v-model="params['设施编号']" placeholder="请输入设施编号" @input="binddata('设施编号',$event.detail.value)">
			</uni-forms-item> -->
			<uni-forms-item required label="检查地点：" name="检查点名称">
				<input maxlength="18" v-model="params['检查点名称']" placeholder="请输入检查地点" @input="binddata('检查点名称',$event.detail.value)" >
			</uni-forms-item>
			<uni-forms-item required label="具体位置：" name="具体位置">
				<input maxlength="18" v-model="params['具体位置']" placeholder="请输入具体位置" @input="binddata('具体位置',$event.detail.value)">
			</uni-forms-item>		
			<!-- <uni-forms-item required label="具体位置：" name="roomIds">
				<uni-combox placeholder="请选择房屋" @input="binddata('roomIds',$event)" :candidates="candidates" v-model="resident.roomIds"></uni-combox>
			</uni-forms-item> -->
			<uni-forms-item required label="生产日期：" name="生产日期">
				<date-picker placeHolder="请填写生产日期" v-model="params['生产日期']" @input="binddata('生产日期',$event)"></date-picker>
			</uni-forms-item>
			<uni-forms-item required label="核验日期：" name="核验日期">
				<date-picker placeHolder="请填写核验日期" v-model="params['核验日期']" @input="binddata('核验日期',$event)"></date-picker>
			</uni-forms-item>
			<uni-forms-item required name="设施状态" label="设施状态：">
				<uni-data-checkbox v-model="params['设施状态']" :localdata="status"></uni-data-checkbox>
			</uni-forms-item>
			<button class="grid-btn" @click="submitForm">提交</button>
		</uni-forms>

	</view>
</template>

<script>
	import DatePicker from '../myComponents/date-picker.vue'
	import LbPicker from '../components/lb-picker/index.vue'
	import dayjs from 'dayjs'
	export default {
		components: {
			LbPicker,
			DatePicker 
		},
		data() {
			return {
				label: '请选择设施类型',
				installTypeList: this.$type.installTypeList,
				params: {
					检查点id	: null,
					检查点名称: null,
					设施类型	: null,
					设施名称	: null,
					生产日期	: null,
					具体位置	: null,
					核验日期	: null,
					设施状态: null,
					分区id: null,
					楼栋号id: null,
					单元号id: null,
					楼层号id: null,
					房屋号id: null
				},
				status: [{
						text: '正常',
						value: '1'
					},
					{
						text: '异常',
						value: '2'
					}
				],
				//表单验证规则
				rules: {
					设施类型: {
						rules: [{
							required: true,
							errorMessage: '请填写设施类型',
						}]
					},
					设施名称: {
						rules: [{
							required: true,
							errorMessage: '请填写设施名称',
						}]
					},
					检查点名称: {
						rules: [{
							required: true,
							errorMessage: '请填写检查点名称',
						}]
					},
					具体位置: {
						rules: [{
							required: true,
							errorMessage: '请填写具体位置',
						}]
					},
					生产日期: {
						rules: [{
							required: true,
							errorMessage: '请填写生产日期',
						}]
					},
					核验日期: {
						rules: [{
							required: true,
							errorMessage: '请填写核验日期',
						}]
					},
					设施状态: {
						rules: [{
							required: true,
							errorMessage: '请填写设施状态',
						}]
					},
				}
			}
		},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.form.setRules(this.rules)
		},
		onLoad(options) {
			this.params.检查点id = options.id
			this.params.分区id = +options.partitionId
			this.params.楼栋号id = +options.buildId
			this.params.单元号id = +options.unitId
			this.params.楼层号id = +options.floorId
			this.params.房屋号id = +options.roomId
			console.log(options)
			this.params.检查点名称 = options.name
			if(options.name == 'undefined') {
				console.log('触发')
				this.params.检查点名称 = uni.getStorageSync('checkName')
			}
		},
		onShow() {

		},
		methods: {
			handleTap(name) {
				this.$refs[name].show()
			},
			handleConfirm(e) {
				if(e) {
					const name = e.dataset.name
					const label = e.item.label
					this.params.设施类型 = e.item.id
					// this.params4.education = e.item.id
					if(name && label){
						this[name] = label
					}
				}
			},
			submitForm(form) {
				// console.log('this.resident', this.resident)
				// 手动提交表单
				this.$refs.form.submit().then(res => {
					res.生产日期 = dayjs(this.params.生产日期).format('YYYY-MM-DDTHH:mm:ssZ')
					res.核验日期 = dayjs(this.params.核验日期).format('YYYY-MM-DDTHH:mm:ssZ')
					if(res.生产日期 && res.核验日期) {
						let startTime = new Date(dayjs(res.生产日期).format('YYYY-MM-DD')).getTime()
						let endTime = new Date(dayjs(res.核验日期).format('YYYY-MM-DD')).getTime()
						if(startTime - endTime > 0) {
							uni.showToast({
								title: '核验日期不得早于生产日期',
								icon: 'none'
							})
							return
						}
					}
					res.检查点id = +this.params.检查点id
					res.分区id = +this.params.分区id
					res.楼栋号id = +this.params.楼栋号id
					res.单元号id = +this.params.单元号id
					res.楼层号id = +this.params.楼层号id
					res.房屋号id = +this.params.房屋号id
					console.log('表单数据信息：', res);
					this.addInstall(res)
				}).catch(err => {
					console.log('表单错误信息：', err);
					uni.showToast({
						icon: 'none',
						title: "表单字段填写错误，请检查"
					})
				})
			},	
			addInstall(params) {
				uni.showLoading({
					mask: true
				})
				this.$http.post('gridSystem/device/add', params).then(res => {
					console.log(res)
					if(res.code === 10000){
						uni.navigateBack({
							delta: 1
						})
						uni.showToast({
							title: '添加成功'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.install-container {
		height: 100vh;
		background-color: #F8F8F8;
	}
	.color {
		color: #808080;
	}
	.tap {
		display: flex;
		align-items: center;
	}
</style>
